<template>
  <view class="bg-white" style="width: 100%; min-height: 100vh;">
    <view style="width: 100%; height: 480upx; margin-bottom: 16upx;">
      <swiperVideoImgs :imgs_arr="product_data.img_arr" :video="product_data.video"></swiperVideoImgs>
    </view>
    <view class="flex justify-between" style="width: 100%; padding: 0 20upx; margin-bottom: 40upx;">
      <view class="flex flex-direction" style="width: 60%;">
        <view style="font-size: 30upx; color: #333333; font-weight: bold;">{{ product_data.name }}</view>
        <view style="font-size: 20upx; color: #999999; margin: 10upx 0;">{{ product_data.intro }}</view>
        <view class="flex align-center" style="font-size: 20upx; color: #C5C5C5;">
          <image src="/static/icon/detail/yuedu@2x.png"
                 style="width: 32upx; height: 24upx; margin-right: 10upx;"></image>
          <view>{{ show_num }}</view>
          <view style="width: 2upx; height: 24upx; background-color: #C5C5C5; margin: 0 24upx;"></view>
          <image src="/static/icon/detail/minidianzan@2x.png"
                 style="width: 24upx; height: 26upx; margin-right: 10upx;"></image>
          <view>{{ zan_num }}</view>
        </view>
      </view>
      <view class="flex flex-direction align-end" style="width: 40%;">
        <view class="flex align-center" style="margin-bottom: 6%;" v-if="product_data.user"
              @click="handleToHomePage(product_data.user.id)">
          <image :src="product_data.user && product_data.user.avatar" mode="aspectFill"
                 style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
          <view style="font-size: 24upx; color: #999999; margin-left: 10upx; text-align: right;">
            {{ product_data.user && product_data.user.nick_name }}
          </view>
        </view>
        <view v-if="!product_data.is_self && !product_data.deleted_at">
          <view v-if="!product_data.is_attention"
                @click="handleAttention(product_data.user, product_data)"
                class="flex justify-center align-center cu-load"
                style="width: 140upx; height: 60upx; background-color: #E52718; border-radius: 40upx; color: white; font-size: 24upx;">
            关注
          </view>
          <view v-else @click="handleAttention(product_data.user, product_data)"
                class="flex justify-center align-center cu-load"
                style="width: 140upx; height: 60upx; border-radius: 40upx; font-size: 24upx; border: 2upx solid #E52718; color: #E52718;">
            已关注
          </view>
        </view>
      </view>
    </view>
    <view style="width: 100%; padding: 0 20upx; margin-bottom: 20upx;" v-if="product_data.is_video">
      <view class="flex align-center">
        <view
            style="width: 1%; border-radius: 10upx; height: 28upx; background-color: #E52718; margin-right: 10upx;"></view>
        <view style="font-size: 30upx; color: #333333; font-weight: bold;">视频教程</view>
      </view>
<!--      'box-shadow: 0 8upx 20upx 0 rgba(238,238,238,1);'-->
      <view class="flex align-center justify-between"
            @click="handlePlayVideo(index, 'video'+index, item)"
            hover-class="video-hover"
            style="width: 100%; height: 84upx; border-bottom: 2upx solid #F8F8F8;"
            v-for="(item, index) in product_data.is_videos" :key="index">
        <view class="flex align-center" style="width: 50%; font-size: 30upx; color: #666666;">
          <view style="margin-right: 12upx;">{{ index + 1 }}.</view>
          <view class="text-hidden">{{ item.name }}</view>
        </view>
        <view style="font-size: 30upx; color: #999999;">
          <span style="margin-right: 10upx;">时长{{ item.video_time }}</span>
        </view>
      </view>
    </view>
    <view style="width: 100%; padding: 0 20upx; margin-bottom: 20upx;" v-if="product_data.is_img">
      <view class="flex align-center">
        <view
            style="width: 1%; border-radius: 10upx; height: 28upx; background-color: #E52718; margin-right: 10upx;"></view>
        <view style="font-size: 30upx; color: #333333; font-weight: bold;">图文列表</view>
      </view>
      <view class="flex align-center justify-between"
            style="width: 100%; height: 84upx; border-bottom: 2upx solid #F8F8F8;"
            v-for="(item, index) in product_data.is_imgs" :key="index"
            @click="handleToGraphicTutorial(item.id, product_data)">
        <view class="flex align-center" style="width: 50%; color: #666666;">
          <view class="text-hidden" style="font-size: 30upx;">{{ item.name }}</view>
        </view>
        <view style="font-size: 30upx; color: #999999;">
          <span style="margin-right: 10upx;">查看</span>
        </view>
      </view>
    </view>
    <view style="width: 100%; padding: 0 20upx; margin-bottom: 20upx;" v-if="product_data.description">
      <view class="flex align-center" style="margin-bottom: 20upx;">
        <view
            style="width: 1%; border-radius: 10upx; height: 28upx; background-color: #E52718; margin-right: 10upx;"></view>
        <view style="font-size: 30upx; color: #333333; font-weight: bold;">教程说明</view>
      </view>
      <view style="width: 100%; font-size: 28upx; color: #666666;" v-html="product_data.description">
      </view>
    </view>
    <view style="width: 100%; padding: 0 20upx; margin-bottom: 30upx;"
          v-if="product_data.is_datas">
      <view class="flex align-center" style="margin-bottom: 20upx;">
        <view style="width: 4upx; height: 28upx; background-color: #E52718; margin-right: 10upx;"></view>
        <view style="font-size: 30upx; color: #333333; font-weight: bold;">资料下载</view>
      </view>
      <view class="flex align-center"
            style="width: 100%; height: 84upx; background-color: #F8F8F8; border-radius: 10upx; padding: 0 20upx; margin-bottom: 10upx;"
            v-for="(item, index) in product_data.is_datas" :key="index" v-if="product_data.is_datas">
        <view class="flex align-center" style="width: 50%;">
          <image src="/static/icon/detail/wenjian-2@2x.png"
                 style="width: 40upx; height: 36upx; margin-right: 12upx;"></image>
          <view class="text-hidden material-name" :style="item.name.length > 7 ? 'width: 240upx;' : ''">
            {{ item.name }}
          </view>
          <view v-if="item.is_free" class="material-free flex justify-center">免费</view>
        </view>
        <view class="flex justify-end" style="width: 50%;">
          <view style="font-size: 22upx; color: #999999;">{{ item.data_size }}MB</view>
          <image src="/static/icon/detail/download@2x.png" style="width: 30upx; height: 30upx; margin-left: 34%;"
                 @click="handlePopDataUploadLink(item.data_url, item.is_free, product_data.is_buy)"></image>
        </view>
      </view>
    </view>
    <view style="width: 100%; padding: 0 20upx; margin-bottom: 22upx; font-size: 28upx; color: #666666;"
          v-html="product_data.data_intro_html"></view>
    <view style="width: 100%; padding: 0 20upx;" v-if="product_data.service_html">
      <view class="flex align-center" style="height: 92upx;">
        <view
            style="width: 1%; border-radius: 10upx; height: 28upx; background-color: #E52718; margin-right: 10upx;"></view>
        <view style="font-size: 30upx; color: #333333; font-weight: bold;">服务内容</view>
      </view>
      <view style="width: 100%; font-size: 28upx; color: #666666; margin-bottom: 20upx;"
            v-html="product_data.service_html"></view>
    </view>
    <view v-if="comment_list.length">
      <view style="width: 100%; height: 20upx; background-color: #F8F8F8;"></view>
      <view style="padding: 0 20upx;">
        <view class="flex justify-between align-center"
              style="width: 100%; height: 80upx; border-bottom: 2upx solid #F8F8F8;">
          <view style="font-size: 30upx; color: #333333; font-weight: bold;">互动评论 <span
              v-if="comment_list.length > 0">（{{ total_comments_num }}）</span></view>
        </view>
      </view>
      <view class="flex" v-for="(item, index) in comment_list" :key="index">
        <view class="flex" style="width: 100%; padding: 20upx; border-bottom: 2upx solid #F8F8F8;">
          <view style="width: 12%;">
            <image :src="item.user && item.user.avatar" mode="aspectFill"
                   style="width: 68upx; height: 68upx; border-radius: 50%; margin-right: 16upx;"></image>
          </view>
          <view class="flex flex-direction" style=" width: 88%;">
            <view class="flex justify-between">
              <view class="flex flex-direction">
                <view style="font-size: 22upx; color: #333333;">{{ item.user && item.user.nick_name }}</view>
                <view style="font-size: 22upx; color: #999999;">{{ item.created_at }}</view>
              </view>
              <view class="flex justify-between" v-if="!product_data.deleted_at">
                <image :src="item.is_zan ? select_like_img : like_img" style="width: 28upx; height: 28upx;"
                       @click.stop="handleChangeCommentLike(item.id)"></image>
              </view>
            </view>
            <view class="flex align-center" style="margin: 2% 0;">
              <view style="font-size: 26upx;color: rgba(153,153,153,1);">评分:</view>
              <view class="" v-for="(score_item, score_index) in item.score" :key="score_index">
                <image style="width: 35upx;height: 35upx; margin-left: 11upx;"
                       src="/static/icon/detail/pingfen@2x.png"></image>
              </view>
            </view>
            <view class="flex"
                  style="width: 100%; padding-bottom: 2%; font-size: 26upx; color: #333333;">
              {{ item.content_html }}
            </view>
            <view class="flex" style="margin-bottom: 10upx;flex-wrap: wrap;">
              <view v-for="(com_imgs, com_index) in item.imgs_arr" :key="com_index" class="flex"
                    @click.stop="handlePreviewImgs(com_imgs, item.imgs_arr)">
                <image :src="com_imgs" mode="aspectFill"
                       style="width: 200upx; height: 174upx; border-radius: 10upx; margin: 0 5% 5% 0;"></image>
              </view>
            </view>
            <view v-for="(review_item, review_index) in item.reviews" :key="review_index">
              <view class="flex" style="width: 100%; font-size: 26upx; color: #333333; margin-bottom: 10upx;">
                <view style="font-weight: bold; width: 15%;">追评：</view>
                <view style="font-size: 26upx; color: #333333; width: 85%;">{{ review_item.content_html }}</view>
              </view>
              <view class="flex" style="margin-bottom: 10upx;flex-wrap: wrap;">
                <view v-for="(review_img, review_img_index) in review_item.imgs_arr" :key="review_img_index"
                      class="flex" @click.stop="handlePreviewImgs(review_img, review_item.imgs_arr)">
                  <image :src="review_img" mode="aspectFill"
                         style="width: 200upx; height: 174upx; border-radius: 10upx; margin: 0 5% 5% 0;"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex align-center justify-center"
          v-if="comment_list.length >=15"
          style="width: 100%; height: 102upx; padding: 0 50upx;">
      <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      <view style="width: 40%; text-align: center;">
        <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
        <view v-else class="action">
          <view class="cu-load" :class="!is_bottom_load?'loading':'over'"
                style="font-size: 28upx; color: #CACACA;"></view>
        </view>
      </view>
      <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
    </view>
    <view style="width: 100%; height: 49px;"></view>
    <view v-if="!product_data.deleted_at" style="height: 49px;">
      <view v-if="product_data.is_buy" class="flex justify-center align-center bottom-payed-menu">
        已支付
      </view>
      <view v-else class="flex justify-center align-center bottom-menu"
            @click="handlePopPayBox(product_data.pay_type, product_data.article_id, product_data.sale_price)">
        立即支付
        <span style="font-size: 20upx;">（合计：¥{{product_data.sale_price}}）</span>
      </view>
    </view>
    <!--下载提示-->
    <view class="cu-modal" :class="link_prompt_flag?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 478upx;">
        <view class="cu-bar justify-end">
          <view class="content" style="font-weight: bold; color: #333333;">提示</view>
        </view>
        <view class="flex-direction justify-center"
              style="width: 100%; padding-bottom: 26upx; font-size: 28upx; word-break:break-all; color: #333333;">
          <view>购买（获取）后即可观看</view>
        </view>
        <view class="flex justify-center cu-bar" style="border-top: 2upx solid #F8F8F8; padding: 0 26upx; font-size: 26upx; color: #E52718;" @click="link_prompt_flag = false">
          我知道了
        </view>
      </view>
    </view>
    <!--下载链接-->
    <view class="cu-modal" :class="link_data_flag?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 554upx;">
        <view class="cu-bar justify-end">
          <view class="content" style="font-weight: bold; color: #333333;">下载链接</view>
        </view>
        <view class="flex justify-center"
              style="width: 100%; padding: 26upx; font-size: 28upx; word-break:break-all; color: #0052C6;">
          {{upload_link}}
        </view>
        <view class="cu-bar" style="border-top: 2upx solid #F8F8F8; padding: 0 26upx;">
          <view @click="link_data_flag = false" style="width: 50%; text-align: center; font-size: 26upx;">
            取消
          </view>
          <view style="width: 2upx; height: 54upx; background-color: #F8F8F8;"></view>
          <view @click="handleCopyLink()" style="width: 50%; text-align: center; color: #E52718; font-size: 26upx;">
            复制链接
          </view>
        </view>
      </view>
    </view>
    <!--下载提示-->
    <view class="cu-modal" :class="link_material_flag?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 478upx;">
        <view class="cu-bar justify-end">
          <view class="content" style="font-weight: bold; color: #333333;">提示</view>
        </view>
        <view class="flex justify-center"
              style="width: 100%; padding: 26upx; font-size: 28upx; word-break:break-all; color: #333333;">
          购买（获取）后即可查看
        </view>
        <view class="flex justify-center cu-bar" style="border-top: 2upx solid #F8F8F8; padding: 0 26upx; font-size: 26upx; color: #E52718;" @click="link_material_flag = false">
          我知道了
        </view>
      </view>
    </view>
    <!-- 视频框-->
    <view class="cu-modal" :class="show_video?'show':''" @click="show_video = false;" style="background-color: black;">
      <view class="cu-dialog" :style="'width: '+window_width+'px'" style="background-color: transparent;">
        <video :id="'myVideo'" :ref="'myVideo'"
               :src="video_url" :controls="true"
               @fullscreenchange="fullScreenChange" v-if="show_video" style="width: 90%;"></video>
      </view>
    </view>
    <!--分享框-->
    <shareDialog :share_flag="share_flag" :herf="'commodityDetail'"
                 :article_title="product_data.name" :article_id="product_id" :article_img="product_data.cover_img"
                 :intro="'我有一个非常好的作品分享给你'"
                 @handleCloseShareDialog="handleCloseShareDialog"></shareDialog>
    <!--支付框-->
    <view class="cu-modal bottom-modal" :class="pay_flag?'show':''" @click="pay_flag = false"
          @touchmove.stop.prevent="">
      <view class="cu-dialog" style="background-color: white; border-radius: 10upx 10upx 0 0;" @click.stop="">
        <view class="cu-bar justify-end" style="margin-bottom: 8%;">
          <view class="content" style="font-weight: bold; color: #333333; font-size: 26upx;">选择支付方式</view>
        </view>
        <view class="flex" style="padding: 0 40upx;">
          <radio-group style="width: 100%;" @change="handleChangeRadioChange">
            <view v-for="(item, index) in pay_type_list" style="margin-bottom: 8%;">
              <view class="flex justify-between align-center" style="width: 100%; margin-bottom: 32upx;">
                <view class="flex">
                  <image :src="item.img" style="width: 44upx; height: 44upx; margin-right: 10upx;"></image>
                  <view style="font-size: 26upx; color: #333333;">{{ item.name }}</view>
                </view>
                <radio class='radio' :value="index" :checked="pay_type === index"/>
              </view>
            </view>
          </radio-group>
        </view>
        <view class="flex justify-center align-center"
              @click="handleToPay(product_data.pay_type, product_data.article_id, product_data.sale_price)"
              style="height: 98upx; background-color: #E52718; font-size: 28upx; color: white;">
          立即支付 <span style="font-size: 20upx;"
                     v-if="product_data.sale_price !== '0.00'">（合计：¥{{ product_data.sale_price }}）</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getQiniuToken, chooseImage} from "utils/wxUtil";
import shareDialog from "components/share-dialog/share-dialog";
import swiperVideoImgs from "components/swiper-video-imgs/swiper-video-imgs"
import {product_getById} from "api/article/article";
import {evaluate_getListByCon} from "api/comment/comment";
import {attention_giveAttention} from "api/attention/attention";
import {zan_changeZan} from "api/like/like";
import {orders_freeOrPasswordPay, orders_payOrder, pay_aliPayOrders} from "api/pay/pay"

export default {
  components: {
    shareDialog,
    swiperVideoImgs
  },
  data() {
    return {
      show_video: false, //展示视频
      window_width: 0, //可视屏幕宽度
      video_url: '', //视频路径
      product_id: '', //商品id
      p_id: '', //评论id
      receive_user_id: '', //接收人id
      zan_num: 0, //赞的数量
      show_num: 0, //查看数
      product_data: {}, //商品数据
      is_load: true, //加载
      is_bottom_load: true, //底部加载
      is_show_video: false, //是否显示视频
      comment_flag: false, //评论框
      total_comments_num: 0, //评论总数
      pay_flag: false,// 支付框
      pay_type: 0, //支付类型
      upload_imgs: [], //上传图片
      publish_imgs: [], //要发布的图片
      video_index: -1, //视频index
      link_prompt_flag: false, //提示框
      link_data_flag: false, //资料下载提示框
      link_material_flag: false, //资料付费框
      upload_link: '', //资料下载链接
      value: 3, //
      share_flag: false, //分享框
      select_like_img: '/static/icon/detail/dianzan-1@2x.png', //选中点赞图片
      like_img: '/static/icon/detail/dianzan@2x.png', //点赞图片
      comment_list: [], //评论列表
      pay_type_list: [
        {
          name: '微信支付',
          img: '/static/icon/detail/weixin@2x.png'
        },
        {
          name: '支付宝支付',
          img: '/static/icon/detail/zhifubao@2x.png'
        },
        {
          name: '密码支付',
          img: '/static/icon/detail/mima@2x.png'
        },
      ], //支付方式列表
      bottom_flag: true, //触底标识
      page: 1, //分页
    }
  },
  methods: {
    //初始化
    pageInit(product_id) {
      product_getById({product_id}).then(res => {
        if (res.data && res.data.service_html) {
          res.data.service_html = res.data.service_html.replace(new RegExp(' style="" ', "g"), '');
          res.data.service_html = res.data.service_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if (res.data && res.data.description) {
          res.data.description = res.data.description.replace(new RegExp(' style="" ', "g"), '');
          res.data.description = res.data.description.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if (res.data && res.data.data_intro_html) {
          res.data.data_intro_html = res.data.data_intro_html.replace(new RegExp(' style="" ', "g"), '');
          res.data.data_intro_html = res.data.data_intro_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if (res.data && res.data.pay_type !== 'normal_password_pay') {
          this.pay_type_list = this.pay_type_list.slice(0, 2)
        }
        this.product_data = res.data;
        if (res.data && res.data.deleted_at) {
          const webView = this.$mp.page.$getAppWebview();
          webView.setTitleNViewButtonStyle(0, {
            "type": "text",
            text: ""
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //看视频
    handlePlayVideo(index, id, {is_free, video_url}) {
      this.video_index = index;
      this.is_show_video = true;
      if (is_free || this.product_data.is_buy) {
        this.show_video = true;
        this.video_url = video_url;
        this.videoContext = uni.createVideoContext('myVideo', this);
        this.videoContext.play()
      } else {
        this.link_prompt_flag = true;
      }
    },
    //视频全屏
    fullScreenChange(e) {
      if (!e.detail.fullScreen) {
        this.videoContext = uni.createVideoContext('myVideo', this);
        this.video_url = '';
        this.show_video = false;
        this.videoContext.pause()
      }
    },
    handleCloseTip(){
      this.link_prompt_flag = false;
      setTimeout(()=>{
        this.data_flag = false;
        this.video_flag = false;
      },500)
    },
    //弹出下载链接框
    handlePopUploadLink(data_url, is_free, is_buy) {
      if(!is_free && !is_buy){
        this.link_prompt_flag = true;
      }else {
        this.upload_link = data_url;
        this.link_prompt_flag = true;
      }
    },
    //去图文教程页
    handleToGraphicTutorial(img_text_tutorial_id) {
      this.$uniNavigateTo({
        url: '/pages/passBand/commodityDetail/graphicTutorial',
        query: {
          img_text_tutorial_id
        }
      })
    },
    //看视频
    handleToVideoMaterial({id: video_tutorial_id, name: video_name}) {
      this.$uniNavigateTo({
        url: '/pages/passBand/commodityDetail/videoMaterial',
        query: {
          video_tutorial_id,
          video_name
        }
      })
    },
    //预览图片
    handlePreviewImgs(img, imgs_arr) {
      if (imgs_arr) {
        uni.previewImage({
          urls: imgs_arr,
          current: img
        });
      }
    },
    //获取评价数据
    getEvaluationData: function (f_id, page, type = 'init') {
      this.is_bottom_load = false;
      evaluate_getListByCon({f_table: 'product', f_id, page}).then(res => {
        if (type === 'init') {
          this.comment_list = [];
        }
        this.total_comments_num = res.data.total;
        let temp = res.data.data;
        if (!temp.length) {
          this.bottom_flag = false;
        } else {
          temp.forEach(item => {
            this.comment_list.push(item)
          })
        }
        this.is_bottom_load = true;
      })
    },
    //关注
    handleAttention(user, article_data) {
      this.is_load = false;
      attention_giveAttention({f_table: 'account_user', f_id: user.id}).then(() => {
        article_data.is_attention = article_data.is_attention ? 0 : 1
        this.is_load = true;
      }).catch(err => {
        console.log(err)
      })
    },
    //关闭分享模态框
    handleCloseShareDialog(e) {
      this.share_flag = false;
    },
    //评论点赞
    handleChangeCommentLike(f_id) {
      zan_changeZan({f_table: 'evaluate', f_id}).then(() => {
        let find = this.comment_list.find(x => x.id === f_id);
        if (find) {
          find.is_zan = find.is_zan ? 0 : 1;
        }
      }).catch(err => {
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
        console.log(err)
      })
    },
    //选择支付方式
    handleChangeRadioChange(e) {
      this.pay_type = e.target.value;
    },
    //弹出支付框
    async handlePopPayBox(pay_type, article_id, fee) {
      let data = {
        f_table: 'product',
        f_id: this.product_id,
        fee: fee,
        pay_type: pay_type,
        article_id: article_id
      }
      let url_option = {}
      switch (pay_type) {
        case 'password_pay':
          let password_pay_data = JSON.stringify(data)
          url_option = {
            url: '/pages/passBand/passwordPayment/passwordPayment',
            query: {
              data: password_pay_data
            }
          }
          break;
        case 'free_pay':
          try {
            await this.passwordPay(data)
            url_option = {
              url: '/pages/passBand/paymentSuccessful/paymentSuccessful',
              query: {
                fee
              }
            }
          } catch (err) {

          }
          break;
        case 'normal_pay':
        case 'normal_password_pay':
          this.pay_flag = true;
          break;
      }
      if (url_option.url) {
        this.$uniNavigateTo(url_option)
      }
    },
    passwordPay(data) {
      return new Promise((resolve, reject) => {
        orders_freeOrPasswordPay(data).then(() => {
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    },
    //去支付
    handleToPay(pay_type, article_id, fee) {
      let data = {
        f_table: 'product',
        f_id: this.product_id,
        fee: fee,
        article_id: article_id,
        pay_type: 'password_pay'
      }
      let user_id = uni.getStorageSync('user_info').id
      switch (this.pay_type) {
        case 0:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=product&f_id=${this.product_id}&fee=${fee}&article_id=${article_id}&user_id=${user_id}`);
          // orders_payOrder(data).then(res => {
          //   uni.requestPayment({
          //     provider: 'wxpay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res) => {
          //       console.log('支付')
          //       console.log('success:' + JSON.stringify(res));
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       this.product_data.is_buy = 1;
          //     },
          //     fail: (err) => {
          //       console.log('未支付')
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err => {
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
        case 1:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=product&f_id=${this.product_id}&fee=${fee}&article_id=${article_id}&user_id=${user_id}&type=1`);
          // pay_aliPayOrders(data).then(res => {
          //   uni.requestPayment({
          //     provider: 'alipay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res) => {
          //       console.log('success:' + JSON.stringify(res));
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //       this.product_data.is_buy = 1;
          //       this.pay_flag = false;
          //     },
          //     fail: (err) => {
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err => {
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
        case 2:
          let password_pay_data = JSON.stringify(data)
          this.pay_flag = false;
          this.$uniNavigateTo({
            url: '/pages/passBand/passwordPayment/passwordPayment',
            query: {
              data: password_pay_data
            }
          })
          break;
      }
    },
    handlePopDataUploadLink(data_url, is_free, is_buy){
      if(!is_free && !is_buy){
        this.link_material_flag = true;
      }else {
        this.upload_link = data_url;
        this.link_data_flag = true;
      }
    },
    //复制下载链接
    handleCopyLink() {
      uni.setClipboardData({
        data: this.upload_link,
        success: ()=> {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
          console.log('success');
        }
      });
      this.upload_link_flag = false;
    },
    //弹出评论框
    handlePopCommentBox() {
      this.comment_flag = true;
    },
    //关闭评论框
    handleCloseCommentBox() {
      this.comment_flag = false;
    },
    //去个人主页
    handleToHomePage(account_user_id) {
      this.$uniNavigateTo({
        url: '/pages/my/homePage/homePage',
        query: {
          account_user_id
        }
      })
    },
    //去全部评论页
    handleToAllComments() {
      this.$uniNavigateTo({
        url: '/pages/article/comments/allComments'
      })
    },
    //去热议
    handleToHotDiscussion() {
      this.$uniNavigateTo({
        url: '/pages/article/comments/hotDiscussion'
      })
    },
    //上传图片
    handleUploadImg() {
      chooseImage(8 - this.publish_imgs.length).then(res => {
        this.upload_imgs = res.image_array;
        this.publish_imgs = this.publish_imgs.concat(this.upload_imgs);
      })
    },
    //删除图片
    handleDeleteImg(index) {
      this.publish_imgs.splice(index, 1);
    }
  },
  //导航栏右侧分享按钮
  onNavigationBarButtonTap() {
    this.share_flag = true;
  },
  //导航栏左侧按钮
  onBackPress() {
    if (this.share_flag || this.comment_flag || this.pay_flag) {
      this.share_flag = false;
      this.comment_flag = false;
      this.pay_flag = false;
      return true
    }
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.getEvaluationData(this.product_id, this.page, 'pull_up');
    }
  },
  //下拉刷新
  onPullDownRefresh() {
    this.pageInit(this.product_id);
    this.getEvaluationData(this.product_id, 1, 'pull_up');
    uni.stopPullDownRefresh();
  },
  onLoad(){
    this.window_width = uni.getStorageSync('system_info').windowWidth;
  },
  onShow() {
    let page = getCurrentPages();//获取应用页面栈
    let currentPage = page[page.length - 1];//获取当前页面信息
    this.product_id = currentPage.options.product_id;
    this.zan_num = currentPage.options.zan_num;
    this.show_num = currentPage.options.show_num;
    getQiniuToken();
    this.pageInit(currentPage.options.product_id);
    this.getEvaluationData(currentPage.options.product_id, 1);
  }
}
</script>

<style lang="less" scoped>
.video-hover{
  background-color: #f1f1f1!important;
}
.material-name {
  font-size: 28upx;
  color: #333333;
  font-weight: bold;
  margin-right: 3%;
}
.material-free{
  width: 80upx;
  height: 36upx;
  line-height: 36upx;
  background-color: #E2E2E2;
  border-radius: 20upx;
  font-size: 24upx;
  color: white;
}
.com-imgs {
  width: 200upx;
  height: 174upx;
  border-radius: 10upx;
  margin: 0 5% 5% 0;
}

/deep/ .uni-swiper-dots {
  bottom: 24upx !important;
  width: auto;
}

/deep/ .uni-swiper-dot {
  width: 16upx !important;
  height: 16upx !important;
  background-color: white;
}

/deep/ .uni-swiper-dot-active {
  background-color: #E52718;
}

/deep/ .uni-swiper-dot-active::after {
  content: none !important;
  background-color: #E52718 !important;
}

/deep/ .uni-radio-input-checked {
  border-color: #E52718 !important;
}

/deep/ uni-radio .uni-radio-input {
  width: 34upx;
  height: 34upx;
  background-color: #ffffff !important;
}

/deep/ uni-radio .uni-radio-input::after {
  background-color: #E52718 !important;
  border: 6upx solid #E52718 !important;
  left: -1 !important;
}
.bottom-payed-menu{
  background-color: #D8D8D8;
  width: 100%;
  height: 49px;
  border-top: 2upx solid #F8F8F8;
  color: white;
  justify-content: center;
  position: fixed;
  bottom: 0;
}
.bottom-menu {
  width: 100%;
  height: 49px;
  border-top: 1px solid #F8F8F8;
  color: white;
  justify-content: center;
  position: fixed;
  bottom: 0;
  background-color: #E52718;
}

.textarea {
  background-color: #F8F8F8;
  width: 590upx;
  height: 202upx;
  border-radius: 10upx;
  padding: 22upx;
  font-size: 26upx;
  text-align: left;
  margin-bottom: 20upx;
}
</style>

